Collapse All Expand All

In this Quick Start, you create a new Windows Store application in Visual Studio, set up a Grid, and add the C1GridSplitter control to your application.

Complete these steps:

1. Create a new Windows Store application in Visual Studio:
   1. Select File | New | Project from the File menu. The New Project dialog box will open.
   2. Select Store Apps from the templates list in the left-hand pane.
   3. Select Blank App from the center pane. Give your project a Name, and select OK. Your new project will open.
2. Locate the References folder in the Solution Explorer. Right-click the folder and select Add Reference.
   1. In the Reference Manager, select Extensions from the left-hand pane.
   2. Select C1.Xaml.dll from the center pane.
   3. Select OK to add the reference to your application.
3. Locate the <Grid> </Grid> tags in your MainPage.xaml file. 
4. Add the following Grid.RowDefinitions and Grid.ColumnDefinitions to your application. The XAML markup should resemble the following:

XAML	Copy Code
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="100"/> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="160"/> <ColumnDefinition/> </Grid.ColumnDefinitions> </Grid>

5. Place your cursor below the closing </Grid.ColumnDefinition> tag. Locate the C1GridSplitter control in your Visual Studio Toolbox, and add two C1GridSplitter controls to your application.
6. Edit your GridSplitter controls so that they resemble the following XAML markup:

XAML	Copy Code
<c1:C1GridSplitter Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Top" Height="16" ShowsPreview="True" /> <c1:C1GridSplitter Grid.RowSpan="2" Grid.Column="1" HorizontalAlignment="Left" Width="16" />

Note that you set the Grid Row and Column positions and the Vertical or Horizontal Alignment.

7. Directly below the second C1GridSplitter control, add a general Rectangle control from your Toolbox and set the Fill property to "Red":

XAML	Copy Code
<Rectangle Fill="Red"/>

8. Press F5 or start debugging to run your application. Moving the horizontal and vertical GridSplitters will enlarge or minimize the red Rectangle:

   

 

 

---

Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback